<template>
  <router-view>
    <div class="app-body">
      <ul class="fairy-list">
        <li v-for="item in fairyList" :key="item.id" class="fairy-item">
          <div class="fairy-avatar">
            <img :src="item.avatar">
            <i>{{item.level}}</i>
          </div>
          <h3>{{item.name}}</h3>
          <h4>{{item.levelName}}</h4>
        </li>
      </ul>
    </div>
  </router-view>
</template>

<script>
import avatar from '@/assets/img/tmp/avatar.jpg'

export default {
  data () {
    return {
      fairyList: [
        { id: 1, avatar, name: '蟹黄包同学', level: 4.1, levelName: '渐入佳境' },
        { id: 2, avatar, name: '蟹黄包同学', level: 4.1, levelName: '渐入佳境' },
        { id: 3, avatar, name: '蟹黄包同学', level: 4.1, levelName: '渐入佳境' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.fairy {
  &-list {
    list-style: none;
  }

  &-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    background: $bg;
    border-bottom: 1px solid $bg-dark;

    > h3,
    > h4 {
      font-size: $font-size;
      font-weight: normal;
    }

    > h3 {
      flex: 1;
      margin-left: 1em;
    }

    > h4 {
      margin-left: 1em;
      color: $color-gray;
    }
  }
}
</style>
